<template>
    <el-container>
        <el-header>
        </el-header>
        <el-container>
            <el-aside width="350px">
                <div class="block">
                    <el-carousel height="400px">
                        <el-carousel-item v-for="item in roll_img" :key="item.index">
                            <img :src=ServeUrl+item class="rotation" >
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-aside>
            <el-main style="padding: 0">
                <h2>【{{goods_brand}}】{{goods_title}}</h2>
                <span>月销量：{{sales_count}}</span>
                <br/>
                <h3>原价格：</h3><h2 class="before-price price">￥{{goods_price}}</h2>
                <h3>促销折扣:</h3><h2 class=" price">{{goods_discount}}</h2>
                <h3>折后价格：</h3><h2 class="price">￥{{goods_nowprice}}</h2>
                <el-row>
                    <h3>尺码：</h3>
                    <el-button type="primary" plain @click="size('M')">M</el-button>
                    <el-button type="primary" plain @click="size('L')">L</el-button>
                    <el-button type="primary" plain @click="size('XL')">XL</el-button>
                    <el-button type="primary" plain @click="size('XXL')">XXL</el-button>
                    <el-button type="primary" plain @click="size('XXXL')">XXXL</el-button>
                </el-row>
                <h3>数量：</h3><el-input-number v-model="num" @change="handleChange" :min="1"  label=""></el-input-number>
                <br/>
                <br/>
                <el-button class="buy" type="primary" @click="gotoOrderConfirm">立即购买</el-button>
                <el-button class="add" type="warning">加入购物车</el-button>
            </el-main>
        </el-container>
        <el-container>
            <el-aside width="215px">
                <div class="left-box-title">相关推荐</div>
                <GoodsCard
                        v-for='(item) in HotWeek'
                        :key="item.index"
                        :goodsname="item.goodsname"
                        :goodsprice="item.goodsprice"
                        :goodsdiscount="item.goodsdiscount"
                        :goodpic="item.goodsPicturepaths[0].gpPicpath"
                        @click.native="freshDetails(item)"
                        class="new-goods"
                ></GoodsCard>
            </el-aside>
            <el-main class="feedback">
                <el-tabs type="border-card">
                    <el-tab-pane label="商品详情">
                        <div class="demo-image">
                            <div class="block">
                                <el-image v-for="pic in shop_detile" :key="pic.index" :src=ServeUrl+pic></el-image>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="累计评价">累计评价</el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
        <el-container>
            <foot></foot>
        </el-container>
    </el-container>

</template>


<style scoped>
    /deep/body{
        overflow: auto;
    }
    .rotation{
        height: 100%;
        background-size: cover;
    }
    .el-aside{
        margin-left: 15vw;
    }
    .el-main{
        text-align: left;
        margin-left: 30px;
        margin-top: 15px;
    }
    .el-main>h2:first-child{
        text-indent:0.5em;
    }
    .el-main>span{
        margin-left: 30px;
        color: #909090;
    }
    h3{
        display: inline-block;
        text-indent:1.5em;
    }
    .price{
        display: inline-block;
        color: red;
    }
    .before-price{
        text-decoration:line-through;
    }
    .el-input-number{
        margin-left: 25px;
    }
    .buy{
        width: 200px;
        height: 60px;
        margin-left: 25px;
    }
    .add{
        width: 200px;
        height: 60px;
        margin-left: 30px;
    }
    .left-box-title{
        line-height: 50px;
        height: 50px;
        margin-top: 50px;
        font-size: 20px;
        font-weight: 800;
        background-color: rgb(245,247,250);
    }
    .card{
        margin-bottom: 25px;
    }
    .feedback{
        border: 1px solid silver;
        margin-top: 50px;
        margin-right: 15vw;
        margin-bottom: 2.3%;
    }
    .el-image{
        display: block;
    }

</style>
<script>
    import GoodsCard from "../../components/GoodsCard";
    export default {
        props:['goods'],
        data() {
            return {
                shopGoods:null,
                ServeUrl:this.$store.state.beginUrl,
                goods_id:'',
                goods_title: '',
                sales_count: '等待数据库获取',
                goods_discount:'',
                goods_price: '',
                goods_brand:'',
                goods_nowprice:'',
                num:1,
                scale:'',
                picsize:0,
                roll_img: [
                ],
                shop_detile: [
                ],
                HotWeek:[],
            }
        },
        methods: {
            handleChange(value) {
                this.num=value
            },
            gotoOrderConfirm(){
                if(this.scale==''){
                    this.$message.error('请选择大小');
                }else{
                    let item={
                        count:this.num,
                        size:this.scale,
                        goodname:'【'+this.goods_brand+'】'+this.goods_title,
                        goodpic:this.shop_detile[0],
                        goodprice:this.goods_nowprice,
                        shopGoods:this.shopGoods,
                    };
                    this.$store.commit('updatabill',item)
                    this.$router.push("/OrderConfirm")
                }
            },
            size(s){
              this.scale=s;
            },
            freshDetails:function(item){
                this.$store.commit('updateshopdetail',item)
                location.reload();
            },
            getShopGoods(){
                this.shopGoods = this.$store.state.shopdetail;

            }
        },
        created(){
            this.getShopGoods();
           let shopdetail=JSON.parse(window.sessionStorage.getItem('shopdetail'))
            this.goods_id=shopdetail.goodsid,
            this.goods_title=shopdetail.goodsname,
            this.goods_discount=shopdetail.goodsdiscount,
            this.goods_price=shopdetail.goodsprice,
            this.goods_brand=shopdetail.goodsbrand,
            this.goods_nowprice=Math.round((shopdetail.goodsdiscount/10)*shopdetail.goodsprice),
            this.picsize=(shopdetail.goodsPicturepaths.length>3)?3:(shopdetail.goodsPicturepaths.length);
            for(let i= this.picsize -1 ;i > 0;i--){
                this.roll_img.push(shopdetail.goodsPicturepaths[i].gpPicpath)
            }
            shopdetail.goodsPicturepaths.forEach(pic=>{
                this.shop_detile.push(pic.gpPicpath)
            })

            this.$axios.get("/goods/queryshopmain?label=本周热卖").then(ret=>{
                ret.data.forEach(data=>{
                    this.HotWeek.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                })
            })

        },
        components:{
            "GoodsCard":GoodsCard,
        }
    }
</script>